<template>
  <div class="filter-container">
    <slot name="first" />
    <el-select v-if="searchColumns.length > 0" v-model="searchField" placeholder="搜索条件" clearable style="width: 120px" class="filter-item">
      <el-option v-for="item in searchColumns" :key="item.key" :label="item.label" :value="item.key" />
    </el-select>
    <el-input v-if="searchColumns.length > 0" v-model="searchKeyword" clearable placeholder="搜索内容" style="width: 200px;" class="filter-item" @keyup.enter.native="handleSearch" />
    <slot />
    <el-select v-if="sortOptions.length > 0" v-model="sort" placeholder="排序" style="width: 140px" class="filter-item" @change="handleSearch">
      <el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key" />
    </el-select>
    <el-button v-if="enableSearch" v-waves class="filter-item filter-item-left" type="primary" icon="el-icon-search" @click="handleSearch">
      搜索
    </el-button>
    <el-button v-if="enableCreate" class="filter-item filter-item-left" type="primary" icon="el-icon-edit" @click="handleCreate">
      添加
    </el-button>
    <el-button v-if="enableReset" class="filter-item filter-item-left" icon="el-icon-refresh-right" @click="handleReset">
      重置
    </el-button>
    <!--    <el-button  v-if="enableDownload" v-waves :loading="downloading" type="primary" icon="el-icon-download" @click="handleDownload">-->
    <!--      导出-->
    <!--    </el-button>-->
    <slot name="ext" />
  </div>
</template>

<script>
import waves from '@/directive/waves' // waves directive
export default {
  name: 'Toolbar',
  directives: { waves },
  props: {
    enableReset: {
      type: Boolean,
      default: true
    },
    enableSearch: {
      type: Boolean,
      default: true
    },
    enableCreate: {
      type: Boolean,
      default: true
    },
    enableDownload: {
      type: Boolean,
      default: false
    },
    searchColumn: {
      type: String,
      default: undefined
    },
    searchKey: {
      type: String,
      default: undefined
    },
    searchColumns: {
      type: Array,
      default() {
        return []
      }
    },
    orderBy: {
      type: String,
      default: undefined
    },
    sortOptions: {
      type: Array,
      default() {
        return []
      }
    },
    downloading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      logo: null
    }
  },
  computed: {
    searchField: {
      get() {
        return this.searchColumn
      },
      set(val) {
        this.$emit('update:searchColumn', val)
      }
    },
    searchKeyword: {
      get() {
        return this.searchKey
      },
      set(val) {
        this.$emit('update:searchKey', val)
      }
    },
    sort: {
      get() {
        return this.orderBy
      },
      set(val) {
        this.$emit('update:orderBy', val)
      }
    }
  },
  created() {
    if (this.searchColumns.length > 0) {
      this.searchField = this.searchColumns[0].key
    }
  },
  methods: {
    handleSearch() {
      this.$emit('search')
    },
    handleCreate() {
      this.$emit('create')
    },
    handleDownload() {
      this.$emit('download')
    },
    handleReset() {
      this.$emit('reset')
    }
  }
}
</script>
